<script lang="ts">

export default {
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {
          "currentExpertLevelId": 5,
          "currentSkillLevelId": 4,
          "currentTitleLevelId": 1,
          "currentWorkSeriesId": 2,
          "directCode": null,
          "eduLevelNumber": 7,
          "eduMajorCode": "030504T",
          "eduMajorDegrees": [{
            "degreeMajorCode": "03",
            "gmtCreate": null,
            "gmtModified": null,
            "id": 1,
            "userAccountId": 579809487052805
          }, {
            "degreeMajorCode": "01",
            "gmtCreate": null,
            "gmtModified": null,
            "id": 2,
            "userAccountId": 579809487052805
          }],
          "email": null,
          "fileIdOfAvatar": 576879478120453,
          "genderCode": "male",
          "gmtBirthday": null,
          "gmtCreate": 1723691452552,
          "gmtCurrentExpertLevelStart": 1723801938000,
          "gmtCurrentSkillLevelStart": 1722503235000,
          "gmtCurrentTitleLevelStart": 1722503213000,
          "gmtModified": 1723691452552,
          "governmentAllowanceLevel": null,
          "id": 579809487052805,
          "introduction": null,
          "inviteCode": null,
          "isAdmin": false,
          "isTemporary": true,
          "nickname": null,
          "password": "{kantboot}3903ef7cb9ac456696311e8095ac6d00.ea9046e011ec24ca577ac2ffa7a6654a",
          "phone": "13155908637",
          "phoneAreaCode": "86",
          "realName": "方某方",
          "schoolName": "纽约州共产主义党政大学",
          "seriesWorkExperiences": [],
          "talentAwardsOfUserAccount": [{
            "gmtCreate": null, "gmtGet": null, "gmtModified": null, "grade": 1, "id": 1, "rank": 1,
            "talentAward": {"description": null, "gmtCreate": null, "gmtModified": null, "id": 1, "isHasGrade": true, "isHasRank": false, "name": "国家科技进步奖"}, "talentAwardId": 1, "userAccountId": 579809487052805
          }],
          "talentPlansOfUserAccount": [{
            "gmtCreate": null,
            "gmtModified": null,
            "gmtParticipate": 1724487337000,
            "id": 1,
            "talentPlan": {
              "desc": null,
              "gmtCreate": null,
              "gmtModified": null,
              "id": 1,
              "name": "“百千万人才工程”国家级人选"
            },
            "talentPlanId": 1,
            "userAccountId": 579809487052805
          }, {
            "gmtCreate": null,
            "gmtModified": null,
            "gmtParticipate": 1723709743000,
            "id": 2,
            "talentPlan": {
              "desc": null,
              "gmtCreate": null,
              "gmtModified": null,
              "id": 2,
              "name": "“国家高层次人才特殊支持计划”人选"
            },
            "talentPlanId": 2,
            "userAccountId": 579809487052805
          }, {
            "gmtCreate": null,
            "gmtModified": null,
            "gmtParticipate": 1723623302000,
            "id": 3,
            "talentPlan": {
              "desc": null,
              "gmtCreate": null,
              "gmtModified": null,
              "id": 3,
              "name": "“创新人才推进计划”中青年领军人才"
            },
            "talentPlanId": 3,
            "userAccountId": 579809487052805
          }],
          "userAccountIdOfInviter": null,
          "userAccountOfInviter": null,
          "userAccountOnline": null,
          "username": null
        }
      }
    }
  },
  data() {
    return {
      currentWorkSeries: {},
      currentSkillLevel: {},
      currentTitleLevel: {},
      currentExpertLevel: {},
      eduLevel: {},
      eduMajor: {},
      eduMajorDegreesInfo: [],
      eduMajorDegreesInfoStr: "",
    }
  },
  mounted() {
    this.init();
  },
  watch:{
    // 监听userInfo
    userInfo: {
      handler: function (val) {
        this.init();
      },
      deep: true
    }
  },
  methods: {
    init() {
      this.currentWorkSeries = this.$talent.get.getWorkSeriesById(this.userInfo.currentWorkSeriesId);
      this.currentSkillLevel = this.$talent.get.getSkillLevelById(this.userInfo.currentSkillLevelId);
      this.currentTitleLevel = this.$talent.get.getTitleLevelById(this.userInfo.currentTitleLevelId);
      this.currentExpertLevel = this.$talent.get.getExpertLevelById(this.userInfo.currentExpertLevelId);
      this.eduLevel = this.$talent.get.getEduLevelByLevelNumber(this.userInfo.eduLevelNumber);
      console.log(this.eduLevel,"--");
      // 通过getAll的code去查询 用来显示出 经济学->财政学类->国际税收
      if (this.userInfo.eduMajorCode) {
        // 获取二级专业
        let eduMajorOfLv2 = this.$talent.get.getEduMajorByCode(this.userInfo.eduMajorCode);
        // 获取所有专业信息
        this.eduMajor = {
          // 获取专业门类
          lv0: this.$talent.get.getEduMajorByCode(eduMajorOfLv2.lv0Code),
          // 获取一级专业
          lv1: this.$talent.get.getEduMajorByCode(eduMajorOfLv2.lv1Code),
          // 获取二级专业
          lv2: this.$talent.get.getEduMajorByCode(eduMajorOfLv2.lv2Code),
        }
      }
      // 获取学位信息
      if (this.userInfo.eduMajorDegrees && this.userInfo.eduMajorDegrees.length > 0) {
        this.eduMajorDegreesInfo = [];
        for (let eduMajorDegree of this.userInfo.eduMajorDegrees) {
          this.eduMajorDegreesInfo.push(this.$talent.get.getEduMajorByCode(eduMajorDegree.degreeMajorCode));
          this.eduMajorDegreesInfoStr += this.$talent.get.getEduMajorByCode(eduMajorDegree.degreeMajorCode).name + "、";
        }
        this.eduMajorDegreesInfoStr = this.eduMajorDegreesInfoStr.substring(0, this.eduMajorDegreesInfoStr.length - 1);
      }
    }
  }
}
</script>

<template>
  <div class="card">
    <div style="text-align: left;padding-left: 5px;height: 30px;">
      <div class="dot"
           :class="{
              'dot-is-admin':userInfo.isAdmin,
              'dot-is-no-admin':!userInfo.isAdmin,
            }"
      ></div>
      <span
          v-if="userInfo.isAdmin"
          class="text-is-admin">管理员</span>
      <span
          v-if="!userInfo.isAdmin"
          class="text-is-no-admin"
      >
              非管理员
            </span>
      <span
          style="float: right;margin: 5px"
          class="small-text">用户ID：{{ userInfo.id }}</span>
    </div>
    <div style="padding: 0px 10px 0 10px;box-sizing: border-box;">
      <div style="height: 5px"></div>
      <el-row>
        <el-col :span="8">
          <el-avatar
              size="large"
              :src="$kt.file.visit(userInfo.fileIdOfAvatar)"
          ></el-avatar>
        </el-col>
        <el-col :span="16">
          <div style="text-align: left;">
            <div class="small-text">姓名：{{ userInfo.realName || '未填写' }}</div>
            <div class="small-text">手机号：{{ userInfo.phone || '未填写' }}</div>
            <div class="small-text">性别：
              <span v-if="userInfo.genderCode==='male'">🚹男</span>
              <span v-else-if="userInfo.genderCode==='female'">🚺女</span>
              <span v-else>未选择</span>
            </div>
            <div
                style="height: 30px"
                class="small-text">工作系列：{{currentWorkSeries?.name || "无"}}
              <span style="font-size: 10px">
              <span
                  v-if="userInfo.gmtCurrentWorkSeriesStart"
              >（{{ $kt.date.format(userInfo.gmtCurrentWorkSeriesStart, "yyyy-MM-dd") }}）</span>
              <span
                  v-else
              >（未明确开始时间）</span>
              </span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>


    <div style="padding: 10px">

      <div style="text-align: left;" class="info-box">

        <div class="small-text">当前技能等级：
         <span style="color: #000000;font-weight: bold;">{{currentSkillLevel?.name || "无"}}</span>
        </div>
        <div class="small-text">当前职称等级：
          <span style="color: #000000;font-weight: bold;">{{currentTitleLevel?.name || "无"}}</span>
        </div>
        <div class="small-text">当前专家人才等级：
          <span style="color: #000000;font-weight: bold;">{{currentExpertLevel?.name || "无"}}</span>
        </div>
        <div class="line"></div>
        <div class="small-text">
          教育信息：
          <div class="small-text-text">
            <div>
              <span>{{ userInfo?.schoolName || "无院校信息" }}</span>
              -
              <span>{{ eduLevel?.name || "无学历信息" }}</span>
            </div>

            <div style="height: 5px"></div>

            <div>

              <span
                  v-if="eduMajor.lv0"
              >
                <span>专业：</span>
                <span>{{ eduMajor?.lv0.name || "无门类信息" }}</span>
                -
                <span>{{ eduMajor?.lv1.name || "无一级专业信息" }}</span>
                -
                <span>{{ eduMajor?.lv2.name || "无二级专业信息" }}</span>
              </span>
              <div
                  v-else
              >
                <span>无学科专业信息</span>
              </div>
            </div>


            <div style="height: 5px"></div>

            <div
            >
              <span>学位：</span>
              <span>
                {{ eduMajorDegreesInfoStr || "无学位信息"}}
              </span>
            </div>


          </div>
        </div>
        <div class="line"></div>
        <div class="small-text">政府津贴：
          <span class="small-text-text">
          <span v-if="userInfo.governmentAllowanceLevel===10000">
            国务院政府津贴
          </span>
          <span v-else-if="userInfo.governmentAllowanceLevel===9000">
                省政府津贴
          </span>
          <span v-else>
            无
          </span>
          </span>
        </div>
      </div>
      <div style="margin-top: 10px;"
           class="info-box">
        <div style="text-align: center" class="small-text">参与过的人才计划</div>
        <div class="line" style="opacity: .4"></div>
        <div>
          <el-scrollbar style="height: 100px">
            <div class="small-text-text">

              <div
                  v-if="!userInfo.talentPlansOfUserAccount||userInfo.talentPlansOfUserAccount.length===0"
              >
                <div style="height: 20px"></div>
                <div style="opacity: .5">
                  <kt-icon icon="ant-icon-borderless-table-outlined"></kt-icon>
                </div>
                <div class="small-text">没有参与过任何人才计划</div>
              </div>

              <div
                  class="in-card"
                  v-for="(item,index) in userInfo.talentPlansOfUserAccount" :key="index">
                <div class="small-text">{{ item.talentPlan.name }}</div>
                <div class="small-text"
                     v-if="item.gmtParticipate"
                >于 {{ $kt.date.format(item.gmtParticipate, "yyyy年MM月dd日") }} 参与
                </div>
                <div class="small-text" v-else>
                  <span style="color: #666666">未明确参与时间</span>
                </div>

              </div>
            </div>
          </el-scrollbar>
          <div style="height: 20px">
            <div style="height: 3px"></div>
            <div
                v-if="userInfo.talentPlansOfUserAccount&&userInfo.talentPlansOfUserAccount.length>0"
                class="small-text">
              共参与了 {{ userInfo.talentPlansOfUserAccount.length }} 个人才计划
            </div>
          </div>

        </div>
      </div>
      <!-- 得到的奖项 -->
      <div style="margin-top: 10px;"
           class="info-box">
        <div style="text-align: center" class="small-text">获得的奖项</div>
        <div class="line" style="opacity: .4"></div>
        <div>
          <el-scrollbar style="height: 100px">
            <div class="small-text-text">
              <div
                  v-if="!userInfo.talentAwardsOfUserAccount||userInfo.talentAwardsOfUserAccount.length===0"
              >
                <div style="height: 20px"></div>
                <div style="opacity: .5">
                  <kt-icon icon="ant-icon-borderless-table-outlined"></kt-icon>
                </div>
                <div class="small-text">没有获得过奖项</div>
              </div>
              <div
                  class="in-card"
                  v-for="(item,index) in userInfo.talentAwardsOfUserAccount" :key="index">
                <div
                class="small-text"
                style="text-align: left"
                >
                  <!-- 名称 -->
                  <span v-if="item.talentAward.isHasGrade">

                  </span>
                </div>
                <div class="small-text">{{ item.talentAward.name }}</div>
                <div class="small-text"
                     v-if="item.gmtReceive"
                >于 {{ $kt.date.format(item.gmtGet, "yyyy年MM月dd日") }} 获得
                </div>
                <div class="small-text" v-else>
                  <span style="color: #666666">未明确获得时间</span>
                </div>

              </div>
            </div>
          </el-scrollbar>
          <div style="height: 20px">
            <div style="height: 3px"></div>
            <div
                v-if="userInfo.talentAwardsOfUserAccount&&userInfo.talentAwardsOfUserAccount.length>0"
                class="small-text">
              共获得了 {{ userInfo.talentAwardsOfUserAccount.length }} 个奖项
            </div>
          </div>
        </div>
      </div>

      <div style="text-align: left">
                <span class="small-text">账号创建时间：{{
                    $kt.date.format(userInfo.gmtCreate, "yyyy-MM-dd hh:mm:ss")
                  }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.card {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .1);
}

.box-content-text {
  width: 100%;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
}

.small-text {
  font-size: 12px;
  color: #666666;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #409EFF;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  margin-top: 5px;
}

.dot-is-admin {
  background-color: #000000;
}

.dot-is-no-admin {
  background-color: #999999;
}

.dot-fail {
  background-color: #F56C6C;
}

.text-is-admin {
  font-size: 12px;
  color: #000000;
}

.text-is-no-admin {
  font-size: 12px;
  color: #999999;
}

.text-fail {
  font-size: 12px;
  color: #F56C6C;
}

.message-status-fail-reason {
  font-size: 12px;
  color: #F56C6C;
}

.info-box {
  border: 1px solid rgba(0, 0, 0, .2);
  padding: 10px;
  border-radius: 5px;

  .small-text {
    margin-bottom: 5px;
  }
}


.line {
  width: 100%;
  height: 1px;
  background-color: #999999;
  margin: 5px 0;
}

.small-text-text {
  font-weight: bold;
  color: #000000;
}

.in-card {
  margin-bottom: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, .05);
  border-radius: 10px;
}

</style>